<template>
  <div class="app-container order-list-index">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-if="YT_roles"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >{{ $t("common.add") }}</el-button
        >
        <!-- <el-button type="primary" plain icon="el-icon-upload2" size="mini" @click="handleExport"
          >{{ $t('common.export') }}</el-button
        > -->
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>
    <TableComponents
      ref="tableRef"
      :url="'/wms/eeAccount/list'"
      :columns="columnsAry"
      :params="{ status: 'NORMAL', ...queryParams }"
      :table-key="true"
      :req="{
        page: 0,
        size: 10,
      }"
      :methodType="'paramsPost'"
      :return-data="returnData"
    >
      <el-table-column slot="operation" :label="$t('common.operation')" align="center"
        ><template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">{{ $t('common.edit') }}</el-button>
          <el-button type="text" @click="handleDelete(scope.row)"
            >{{ $t('common.del') }}</el-button
          >
        </template></el-table-column
      >
    </TableComponents>
    <el-dialog :visible.sync="openVisible" :title="title" width="50%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-position="left"
        label-suffix=":"
        :rules="rules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col
            v-for="(item, index) in columnForm.base"
            :key="index"
            :xs="24"
            :sm="item.col"
            :md="item.col"
            :lg="item.col"
            :xl="item.col"
          >
            <FormComponents :item-obj="item" :form="ruleForm" :isedit="isEdit">
              <template slot="customerId">
                <WmsCustomerSelect
                  v-model="ruleForm.customerId"
                ></WmsCustomerSelect>
              </template>
              <template slot="supplierId"></template>
            </FormComponents>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('common.confirm') }}</el-button>
        <el-button type="primary" @click="cancel">{{ $t('common.cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  addEeAccount,
  editEeAccount,
  delEeAccount,
  exportEeAccount,
} from "@/api/money";
import TableComponents from "@/components/Table/list.vue";
import TabFilter from "@/components/Tab/tabFilter.vue";
import FormComponents from "@/components/FormComponents/index.vue";

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    FormComponents,
    TableComponents,
    TabFilter,
  },

  data() {
    return {
      activeName: 1,
      showSearch: true,
      columns: [
        { key: 1, label: this.$t("fiance.payee"), visible: true },
        { key: 2, label: this.$t("fiance.drawee"), visible: true },
        { key: 3, label: this.$t("fiance.total"), visible: true },
        { key: 4, label: this.$t("common.createTime"), visible: true },
        { key: 5, label: this.$t("common.operation"), visible: true },
      ],
      columnsAry: [
        { prop: "bankAccount", label: this.$t('fiance.accountNo'), width: "100px" },
        { prop: "bank", label: this.$t('fiance.openingBank'), width: "100px" },
        { prop: "money", label: this.$t('fiance.amount'), width: "100px" },
        { prop: "accountName", label: this.$t('common.name'), width: "100px" },
        { prop: "address", label: this.$t('common.address'), width: "100px" },
        { prop: "phone", label: this.$t('common.phone'), width: "100px" },
        { prop: "remarks", label: this.$t('common.remark'), width: "100px" },
        { prop: "customerId", label: this.$t('common.customer'), width: "100px" },
        { prop: "operation", slot: 'operation', label: this.$t('common.operation'), width: "100px" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      params: {},
      openVisible: false,
      ruleForm: {},
      rules: {
        amount: [{ required: true, message: this.$t('common.pleaseInput'), trigger: "blur" }],
        payee: [{ required: true, message: this.$t('common.placeholderSelect'), trigger: "change" }],
        payer: [{ required: true, message: this.$t('common.placeholderSelect'), trigger: "change" }],
        serviceFeeCode: [
          { required: true, message: this.$t('common.placeholderSelect'), trigger: "change" },
        ],
      },
      title: null,
    };
  },
  computed: {
    YT_roles() {
      // 暂时判断roles为common不是客户的未YT
      if (this.$store.state.user.roles[0] !== "common") {
        return true;
      }
    },
    columnForm() {
      const base = [
        { prop: "bankAccount", label: this.$t('fiance.accountNo'), type: "input", col: 24 },
        { prop: "bank", label: this.$t('fiance.openingBank'), type: "input", col: 24 },
        { prop: "accountName", label: this.$t('common.name'), type: "input", col: 24 },
        { prop: "address", label: this.$t('common.address'), type: "input", col: 24 },
        { prop: "phone", label: this.$t('common.phone'), type: "input", col: 24 },
        { prop: "remarks", label: this.$t('common.remark'), type: "input", col: 24 },
        {
          prop: "customerId",
          slot: "customerId",
          label: this.$t('common.customer'),
          type: "select",
          col: 24,
        },
        // {
        //   prop: "supplierId",
        //   slot: "supplierId",
        //   label: "供应商",
        //   type: "input",
        //   col: 24,
        // },
      ];
      return { base };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$nextTick(() => {
        this.$refs.tableRef.getList();
      });
    },
    returnData(data) {
      return data.content.map((r) => {
        r.createTime = dayjs(r.createTime).format("YYYY-MM-DD HH:mm:ss");
        return r;
      });
    },
    cancel() {
      this.openVisible = false;
      this.resetForm();
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.openVisible = true;
      this.resetForm();
      this.title = this.$t("common.add");
    },
    // 编辑
    handleEdit(row) {
      this.title = this.$t("common.edit");
      const obj = row
      this.ruleForm = obj;
      this.openVisible = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          //   this.ruleForm.warehousingTime = dayjs(this.ruleForm.warehousingTime).format(
          //     "YYYY-MM-DD HH:mm:ss"
          //   );
          this.ruleForm.status = this.ruleForm.status ? this.ruleForm.status = 'NORMAL' : this.ruleForm.status
          if (this.ruleForm.id != null) {
            editEeAccount(this.ruleForm).then((response) => {
              this.$modal.msgSuccess(this.$t("common.succcessInfo"));
              this.openVisible = false;
              this.getList();
            });
          } else {
            addEeAccount(this.ruleForm).then((response) => {
              this.$modal.msgSuccess(this.$t("common.succcessInfo"));
              this.openVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(this.$t('common.delMsg'), this.$t('common.reminder'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        const ids = row.id || this.ids
        delEeAccount(ids).then(res=>{
          if(res) {
            this.$message({
              type: 'success',
              message: this.$t('common.succcessInfo')
            });
            this.getList()
          }
        });
      }).catch(() => {});
    },
  },
};
</script>
<style lang="scss">
.tableTooltip {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  background: #f5f7fa;
  padding: 12px;
  color: #606266;
}
</style>
